<template>
  <div class="person" style="text-align: center; margin: 16px; font-weight: bold">
    添加人员
  </div>
  <div class="addPerson">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field v-model="formdata.name" label="姓名" placeholder="请填写姓名"
          :rules="[{ required: true, message: '请填写姓名' }]" />
        <van-field v-model="formdata.title" label="职务" placeholder="请填写职务" />
        <van-field v-model="formdata.phone" label="联系方式" placeholder="请填写联系方式" />
        <van-field v-model="formdata.address" label="地址" placeholder="请填写地址" />
        <van-field v-model="formdata.info" label="其他信息" placeholder="请填写其他信息" />
        <van-field label="照片上传">
          <template #input>
            <van-uploader v-model="fileList" multiple :max-count="5" :max-size="1024 * 1024" @oversize="onOversize"
              :after-read="afterRead" />
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">创建人员信息</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { showToast } from 'vant';
import 'vant/es/toast/style';
import { ref } from 'vue';
import { addPerson, addPersonPhoto } from '@/api/personapi';

export default {
  setup() {
    const formdata = ref({
      "name": '',
      "title": '',
      "phone": '',
      "address": '',
      "info": '',
    });
    const onSubmit = () => {
      console.log(JSON.stringify(formdata.value));
      addPerson(JSON.stringify(formdata.value)).then((res) => {
        console.log(res)
        if (res.status == 'success') {
          for (const f of (fileList.value)) {
            console.log(f.content)
            var fileData = { person_id: res.data.person_id.toString(), image: f.content.replace("data:image/jpeg;base64,", "") };
            addPersonPhoto(JSON.stringify(fileData));
          }
        }
      }).catch((err) => { showToast(err) });
    };
    const fileList = ref([]);
    const afterRead = (file) => {
      console.log(file.content)
    };
    const onOversize = () => {
      showToast('文件大小不能超过 1M');
    };
    return {
      formdata,
      onSubmit,
      fileList,
      afterRead,
      onOversize,
    };
  },
};
</script>

<style lang="less">
.goods {
  padding-bottom: 50px;

  &-swipe {
    img {
      width: 100%;
      display: block;
    }
  }

  &-title {
    font-size: 16px;
  }

  &-price {
    color: #f44;
  }

  &-express {
    color: #999;
    font-size: 12px;
    padding: 5px 15px;
  }

  &-cell-group {
    margin: 15px 0;

    .van-cell__value {
      color: #999;
    }
  }

  &-tag {
    margin-left: 5px;
  }
}
</style>
